<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 30px; /* 增大整体内边距 */
        }

        h1 {
            text-align: center;
            font-size: 40px; /* 增大标题字体大小 */
        }

        form {
            width: 550px; /* 增大表单宽度 */
            margin: 0 auto;
            padding: 50px; /* 增大内边距 */
            background-color: #f2f2f2;
            border: 2px solid #ccc; /* 增大边框宽度 */
            border-radius: 12px; /* 增大边框圆角 */
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 18px; /* 增大输入框内边距 */
            margin-bottom: 25px; /* 增大下方间距 */
            box-sizing: border-box;
            border: 2px solid #ccc; /* 增大边框宽度 */
            border-radius: 12px; /* 增大输入框圆角 */
            outline: none;
            font-size: 20px; /* 增大字体大小 */
        }


        .button-container {
            display: flex;
            justify-content: space-between;
        }

        input[type="submit"],
        input[type="button"] {
            flex: 1;
            padding: 18px; /* 增大按钮内边距 */
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 12px; /* 增大按钮圆角 */
            cursor: pointer;
            margin: 0 5px;
            font-size: 20px; /* 增大字体大小 */
        }

        input[type="submit"]:hover,
        input[type="button"]:hover {
            background-color: #0056b3;
        }

        label {
            margin-bottom: 12px; /* 增大标签下方间距 */
            display: inline-block;
            font-weight: bold;
            width: 160px; /* 增大标签宽度 */
            font-size: 22px; /* 增大标签字体大小 */
        }

        .radio-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px; /* 增大单选框组容器下方间距 */
        }

        .radio-container input[type="radio"] {
            margin-right: 10px; /* 增大单选框间距 */
            width: 30px; /* 增大单选框尺寸 */
            height: 30px; /* 增大单选框尺寸 */
            cursor: pointer; /* 鼠标指针样式 */
        }
    </style>

    <script>
        function redirectToLogin(){
            var account = document.getElementById("account");
            var password = document.getElementById("password");
            var radio = document.getElementsByName("group");
            var roleId = document.getElementById("roleId");
            if(account.value !== ""){
                if(password.value !== ""){
                    if(radio[0].checked){
                        roleId.value = 0;
                        document.getElementById("login").action = "/role/user";
                        document.getElementById("login").submit();
                    } else if(radio[1].checked){
                        roleId.value = 1;
                        document.getElementById("login").action = "/role/administrator"
                        document.getElementById("login").submit();
                    }
                } else {
                    confirm("密码不能为空！");
                    return false;
                }
            } else {
                confirm("用户名不能为空！");
                return false;
            }
        }
        function redirectToRegister() {
            window.location.href = "/user/register";
        }
    </script>
</head>
<body>
<h1>用户登录</h1>
<form id="login" name="form-login" method="post" enctype="application/x-www-form-urlencoded">
    <label for="account">用户名：</label>
    <input id="account" name="account" type="text">

    <div class="radio-container">
        <label>用户类型：</label>
        <input type="radio" id="user" name="group" checked="true" value="0">
        <label for="user">普通用户</label>
        <input type="radio" id="administrator" name="group" value="1">
        <label for="administrator">管理员</label>
    </div>
    <input type="hidden" id="roleId" name="roleId">

    <label for="password">密码：</label>
    <input id="password" name="password" type="password" style="font-family: 黑体"><br>

    <div class="button-container">
        <input type="button" value="登录" onclick="redirectToLogin()">
        <input type="button" value="注册" onclick="redirectToRegister()">
    </div>
</form>
</body>
</html>
